<template>
  <div id="selectPanelBox">
    <el-select v-model="selectPanelType" placeholder="请选择图表类型">
      <el-option
        v-for="item in selectPanels"
        :key="item.id"
        :label="item.name"
        :value="item.name"
      >
        <img style="width: 30px" :src="item.imgPath" alt="" />
        <div style="float: right; color: #8492a6; font-size: 14px">
          <p>{{ item.name }}</p>
        </div>
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  props: {
  },
  components: {},
  data() {
    return {
      selectPanelType: "Table Chart",
      selectPanels: [],
    };
  },
  created() {
    this.selectPanels = this.$store.getters.getPanelArr("");
    // this.selectPanelType = this.$store.getters.getCurrentPanelName;
    // console.log("zct selectPanelType",this.selectPanelType)
  },
  watch: {
    selectPanelType: {
      handler(name) {
        // console.log("zct name",name)
        const selectPanel = this.selectPanels.find(
          (item) => {return item.name == name;}
        );
        // console.log("zct selectPanel",selectPanel)
        // const { panelName } = selectPanel;
        this.$store.commit("setPanelPath",selectPanel);
      },
    },
    "$store.state.addPanel.currentPanelName":function(val){
       const selectPanel = this.selectPanels.find(
          (item) => {return item.panelName == val;}
        );
        this.selectPanelType = selectPanel.name
    },
  },
  methods: {},
};
</script>
<style lang="less" scoped>
#selectPanelBox {
  .el-select {
    width: 100%;
  }
}
</style>